<template>
<div class="topo-properties">
    <div class="topo-properties-nav">
        <!-- <q-select v-model="curComponent" :options="componentOptions" @input="changeComponent" style="margin-right:0px;height:43px;border:none;" /> -->        
        <template v-if="isLayer">
            <q-input v-model="topoData.name" />
        </template>
        <template v-if="configObject != null && isLayer == false">
            <q-input v-model="configObject.name" />
        </template>
    </div>
    <template v-if="configObject != null && isLayer == false">              
        <div class="topo-properties-tabs">
            <div class="topo-properties-tab" @click="changeTab(0)" :class="{'topo-properties-tab-active': tabIndex == 0}">样式</div>
            <div class="topo-properties-tab" @click="changeTab(1)" :class="{'topo-properties-tab-active': tabIndex == 1}">数据</div>
            <div class="topo-properties-tab" @click="changeTab(2)" :class="{'topo-properties-tab-active': tabIndex == 2}">行为</div>
        </div>
        <div class="topo-properties-table">
            <div v-show="tabIndex == 0">
                
                    <table style="display: none">
                        <tr>
                            <td width="50%" style="padding:5px 0px;background-color:#eee;">属性</td>
                            <td width="50%" style="padding:5px 0px;background-color:#eee;">值</td>
                        </tr>
                    </table>
                    <q-list separator no-border>
                        <q-expansion-item label="Position" default-opened>
                            <table>
                                <tr>
                                    <td width="50%">X</td>
                                    <td width="50%">
                                        <q-input type="number" suffix="px" v-model.lazy="configObject.style.position.x" style="padding-right:5px;" />
                                    </td>
                                </tr>
                                <tr>
                                    <td>Y</td>
                                    <td>
                                        <q-input type="number" suffix="px" v-model.lazy="configObject.style.position.y" style="padding-right:5px;" />
                                    </td>
                                </tr>
                                <tr>
                                    <td>W</td>
                                    <td>
                                        <q-input type="number" suffix="px" v-model.lazy="configObject.style.position.w" style="padding-right:5px;" />
                                    </td>
                                </tr>
                                <tr>
                                    <td>H</td>
                                    <td>
                                        <q-input type="number" suffix="px" v-model.lazy="configObject.style.position.h" style="padding-right:5px;" />
                                    </td>
                                </tr>
                            </table>
                        </q-expansion-item>

                        <q-expansion-item label="Border" default-opened>
                            <table>
                                <tr>
                                    <td width="50%">BorderWidth</td>
                                    <td width="50%">
                                        <q-input type="number" suffix="px" style="padding-right:5px;" v-model.lazy="configObject.style.borderWidth" />
                                    </td>
                                </tr>
                                <tr>
                                    <td>BorderStyle</td>
                                    <td>
                                        <q-select v-model="configObject.style.borderStyle" :options="borderStyleOptions" />
                                    </td>
                                </tr>
                                <tr>
                                    <td>BorderColor</td>
                                    <td>
                                        <q-input
                                            filled
                                            v-model="configObject.style.borderColor"
                                            class="my-input"
                                        >
                                            <template v-slot:append>
                                            <q-icon name="colorize" class="cursor-pointer">
                                                <q-popup-proxy transition-show="scale" transition-hide="scale">
                                                <q-color v-model="configObject.style.borderColor" />
                                                </q-popup-proxy>
                                            </q-icon>
                                            </template>
                                        </q-input>
                                    </td>
                                </tr>
                            </table>
                        </q-expansion-item>

                        <q-expansion-item label="Base" default-opened>
                            <table>
                                <tr>
                                    <td width="50%">Visible</td>
                                    <td width="50%">
                                        <q-select v-model="configObject.style.visible" :options="[{label: 'Visible',value: true},{label: 'Invisible',value: false}]" />
                                    </td>
                                </tr>
                                <tr>
                                    <td>z-index</td>
                                    <td>
                                        <q-input type="number" v-model.lazy="configObject.style.zIndex" />
                                    </td>
                                </tr>
                                <tr>
                                    <td>Rolate</td>
                                    <td>
                                        <q-input type="number" v-model.lazy="configObject.style.transform" suffix="deg" style="padding-right:5px;" />
                                    </td>
                                </tr>
                                <tr>
                                    <td>BackColor</td>
                                    <td>
                                        <q-input
                                            filled
                                            v-model="configObject.style.backColor"
                                            class="my-input"
                                        >
                                            <template v-slot:append>
                                            <q-icon name="colorize" class="cursor-pointer">
                                                <q-popup-proxy transition-show="scale" transition-hide="scale">
                                                <q-color v-model="configObject.style.backColor" />
                                                </q-popup-proxy>
                                            </q-icon>
                                            </template>
                                        </q-input>
                                    </td>
                                </tr>
                                <tr v-if="configObject.style.url != undefined && configObject.style.url != null">
                                    <td>URL</td>
                                    <td>
                                        <q-input v-model.lazy="configObject.style.url" />
                                    </td>
                                </tr>
                                <tr v-if="configObject.style.text != undefined">
                                    <td>Text</td>
                                    <td>
                                        <q-input v-model.lazy="configObject.style.text" />
                                    </td>
                                </tr>
                                <tr v-if="configObject.style.textAlign != undefined">
                                    <td>TextAlign</td>
                                    <td>
                                        <q-select v-model="configObject.style.textAlign" :options="textAlignOptions" />
                                    </td>
                                </tr>
                                <tr>
                                    <td>ForeColor</td>
                                    <td>
                                        <q-input
                                            filled
                                            v-model="configObject.style.foreColor"
                                            class="my-input"
                                        >
                                            <template v-slot:append>
                                            <q-icon name="colorize" class="cursor-pointer">
                                                <q-popup-proxy transition-show="scale" transition-hide="scale">
                                                <q-color v-model="configObject.style.foreColor" />
                                                </q-popup-proxy>
                                            </q-icon>
                                            </template>
                                        </q-input>
                                    </td>
                                </tr>
                                <tr v-if="configObject.style.fontFamily != undefined">
                                    <td>Font Family</td>
                                    <td>
                                        <q-select v-model="configObject.style.fontFamily" :options="fontFamilyOptions" />
                                    </td>
                                </tr>
                                <tr v-if="configObject.style.fontSize != undefined">
                                    <td>Font Size</td>
                                    <td>
                                        <q-input type="number" suffix="px" style="padding-right:5px;" v-model.lazy="configObject.style.fontSize" />
                                    </td>
                                </tr>
                                <tr v-if="configObject.style.radius != undefined">
                                    <td>Radius</td>
                                    <td>
                                        <q-input type="number" v-model.lazy="configObject.style.radius" />
                                    </td>
                                </tr>
                                <tr v-if="configObject.style.lineWidth != undefined">
                                    <td>LineWidth</td>
                                    <td>
                                        <q-input type="number" suffix="px" style="padding-right:5px;" v-model.lazy="configObject.style.lineWidth" />
                                    </td>
                                </tr>
                            </table>
                        </q-expansion-item>
                    </q-list>
                
            </div>
            <div v-show="tabIndex == 1">

                <div class="not-surpport">根据实际系统设计</div>

            </div>
            <div v-show="tabIndex == 2">
                <template v-if="configObject && configObject.action">
                    <template v-for="(event,index) in configObject.action">
                        <div :key="index" style="margin-top:10px;">
                            <div style="padding:5px;border-left:#ccc solid 1px;border-right:#ccc solid 1px;border-top:#ccc solid 1px;">
                                交互-{{index+1}}
                                <q-icon name="delete" color="negative" style="float:right;cursor:pointer;" @click.native="removeAction(index)"/>
                            </div>
                            <table >
                                <tr>
                                    <td width="50%">事件</td>
                                    <td width="50%">
                                        <q-select 
                                        emit-value 
                                        map-options 
                                        option-label="label" 
                                        v-model="event.type" 
                                        :option-disable="(item) => item === null ? true : item.cannotSelect" 
                                        :options="[{label:'点击',value:'click'},{label:'双击',value:'dblclick'},{label:'鼠标移入',value:'mouseenter',cannotSelect: true},{label:'鼠标双击',value:'mouseleave',cannotSelect: true}]" />
                                    </td>
                                </tr>
                                <tr>
                                    <td>动作</td>
                                    <td>
                                        <q-select 
                                        emit-value 
                                        map-options  
                                        option-label="label" 
                                        v-model="event.action" 
                                        :option-disable="(item) => item === null ? true : item.cannotSelect" 
                                        :options="[{label:'打开链接',value:'link',cannotSelect: true},{label:'赋值变量',value:'val',cannotSelect: true},{label:'展示隐藏',value:'visible'},{label:'调用服务',value:'service',cannotSelect: true}]" />
                                    </td>
                                </tr>

                                <tr v-if="event.action == 'visible'">
                                    <td>点击出现</td>
                                    <td>
                                        <q-select filled emit-value multiple use-chips map-options option-label="label" v-model="event.showItems" :options="generateTargetComponentOptions()" />
                                    </td>
                                </tr>
                                <tr v-if="event.action == 'visible'">
                                    <td>点击隐藏</td>
                                    <td>
                                        <q-select filled emit-value multiple use-chips map-options option-label="label" v-model="event.hideItems" :options="generateTargetComponentOptions()" />
                                    </td>
                                </tr>
                            </table>
                        </div>
                    </template>
                    <div style="width:100%;padding:10px 10px 10px 10px;">
                        <q-btn label="Add" outline @click="addAction" style="width:100%;" />
                    </div>
                </template>
            </div>
        </div>
    </template>
    <template v-if="isLayer">
        <table style="margin-top: 10px">
            <tr>
                <td width="40%">
                    BackColor
                </td>
                <td>
                    <q-input v-model.lazy="topoData.layer.backColor" />
                </td>
            </tr>
            <tr>
                <td>
                    BackImage
                </td>
                <td>
                    <q-input v-model.lazy="topoData.layer.backgroundImage" />
                </td>
            </tr>
            <tr>
                <td>
                    分辨率
                </td>
                <td>
                    <q-select v-model="layerWH" :options="whOptions" />
                </td>
            </tr>
            <tr v-if="layerWH == 'custom'">
                <td>
                    W
                </td>
                <td>
                    <q-input v-model.lazy="topoData.layer.width" />
                </td>
            </tr>
            <tr v-if="layerWH == 'custom'">
                <td>
                    H
                </td>
                <td>
                    <q-input v-model.lazy="topoData.layer.height" />
                </td>
            </tr>
        </table>
        
    </template>
</div>
</template>

<script>

import { mapActions, mapGetters, mapState, mapMutations } from 'vuex'

export default {
    name: 'TopoProperties',
    data() {
        return {
            tabIndex: 0,
            fontFamilyOptions: ['Arial',"Helvetica","sans-serif","宋体","黑体","微软雅黑"],
            textAlignOptions: ["left","right","center","justify"],
            borderStyleOptions: ["solid","dashed","dotted"],
            whOptions: ['1024x768','1366x768','1280x800','1440x900','1600x900','1920x1080','custom'],     
            layerWHTemp: '',
        }
    },
    computed: {
        layerWH: {
            get: function() {
                if(!this.topoData.layer.width || !this.topoData.layer.height) {
                    this.topoData.layer.width = 1600;
                    this.topoData.layer.height = 900;  
                }
                if(this.layerWHTemp == '') {
                    var wh = this.topoData.layer.width + 'x' + this.topoData.layer.height;
                    if(this.whOptions.indexOf(wh,0) == -1) {
                        this.layerWHTemp = 'custom';
                    } else {
                        this.layerWHTemp = wh;
                    }
                } else {
                    var wh = this.topoData.layer.width + 'x' + this.topoData.layer.height;
                    if(this.whOptions.indexOf(wh,0) == -1) {
                        this.layerWHTemp = 'custom';
                    }
                }
                return this.layerWHTemp;
            },
            set: function(val) {
                this.layerWHTemp = val;
                if(val == 'custom') {
                    
                } else {
                    var wh = val.split('x');
                    this.topoData.layer.width = parseInt(wh[0]);
                    this.topoData.layer.height = parseInt(wh[1]);
                }
            }
        },
        ...mapState({
            topoData: state => state.topoEditor.topoData,
            selectedComponents: state => state.topoEditor.selectedComponents,
            selectedComponentMap: state => state.topoEditor.selectedComponentMap,
            isLayer: state => state.topoEditor.selectedIsLayer,               
            configObject: state => state.topoEditor.selectedComponent,        
        })
    },
    methods: {
        initPage(configData) {
            this.configData = configData;
        },
        changeTab(tabIndex) {
            this.tabIndex = tabIndex;
        },
        bindData(configObject, index, isLayer) {
            this.configObject = configObject;
            this.isLayer = isLayer;
            if (isLayer === false) {

            }
        },
        generateTargetComponentOptions() {            
            var options = [];
            this.topoData.components.forEach(component => {
                if (this.configObject.identifier != component.identifier) {
                    options.push({
                        label: component.name || component.type,
                        value: component.identifier
                    });
                }
            });
            return options;
        },
        removeAction(index){
            this.configObject.action.splice(index,1);
        },
        addAction() {
            var action = {
                type: 'click',
                action: 'visible',
                showItems: [],
                hideItems: []
            };
            this.configObject.action.push(action);
        }
    },
    mounted() {

    }
}
</script>

<style lang="scss">
.topo-properties {
    border: #ccc solid 1px;
    background-color: white;
    height: 100%;

    .topo-properties-tabs {
        height: 35px;
        display: flex;
        border-bottom: #ccc solid 1px;
        background-color: white;

        .topo-properties-tab {
            height: 35px;
            text-align: center;
            line-height: 35px;
            flex: 1;
            color: #666;
        }

        .topo-properties-tab+.topo-properties-tab {
            border-left: #ccc solid 1px;
        }

        .topo-properties-tab:hover {
            cursor: pointer;
        }

        .topo-properties-tab-active {
            color: #000;
            border-bottom: #3388ff solid 2px;
            font-weight: bold;
        }
    }

    .topo-properties-table {
        overflow-x: hidden;
        overflow-y: auto;
        height: calc(100% - 92px);

        table {
            width: 100%;
            border-collapse: collapse;

            td {
                text-align: center;
                padding: 0px;
                border: #ccc solid 1px;
            }

            .q-input {
                border: none;
            }

            .q-select {
                border: none;
                margin-right: 0px;
            }
        }
    }

    .not-surpport {
        margin: 20px auto;
        text-align: center;
    }
}
</style>
